iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
0
自我挑戰組

JS30自我學習筆記系列 第 2

第一堂 - JavaScript Drum Kit

  • 分享至 

  • xImage
  •  

根據上一堂課所下載的課程教材,第一堂課我們要做的是一個相當有趣的實作—「鍵盤爵士鼓組」。敲打鍵盤特定字母,發出對應的打擊聲,範例如下:
Drum Kit實作範例

邏輯流程

基本上這個實作所要做的只有兩件事:

  1. 按下按鍵播放對應的音檔
  2. 按下按鍵加入該按鈕的顯示效果

課程重點

  1. data-* attribute:在HTML5中,有個特別的元素屬性"data-XXX",XXX是自訂的任何字串。此為客製化屬性,使用者可以在這屬性中儲存資料。像是在實作中,我們賦予div一個data-key的屬性,裡面儲存鍵盤按鍵所對應的編碼。如:

    <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
    

    而這個屬性有兩個需要注意的地方:

    • 屬性名稱不能含有大寫字母,且開頭必須為"data-"。
    • 屬性值必須為字串。
  2. addEventListener():本實作的重要函數,用來監聽keydown以及transitionend,分別是按下鍵盤的動作以及css的過場結束。

  3. ES6 Template literals:JavaScript ES6 中的模版字符串,當你需要在JS裡加入HTML內容,或是要打需要換行的字串,又或是想要將變數插入字串中,這是一個非常好用的方法。請大家熟練這個方法,因為後面的課程會常常用到。那要如何使用呢?就是鍵盤左上角的反引號"`"。

    例如,在以前在JS寫HTML內容:

    var content_old = '<header>\n'+
    '<div class="banner">\n'+
    '<img src="apple.jpg"\n'+
    '</div>\n'+
    '</header>'
    

    現在我們可以這樣寫:

    var content_new = `
    <header>
        <div class='banner'>
            <img src="apple.jpg>
        </div>
    </header>
    `
    

    那如果要在字串中插入變數,方法為${...},在這次實作的程式碼中,範例如下:

    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
    
  4. ES6 Arrow Function:箭頭函式有幾個好處,簡潔、好讀、綁定this。 直接示範如何使用,傳統函式宣告:

    const func = function (x) { return x + 1 }
    

    箭頭函式宣告:

    const func = (x) => x + 1
    
    • 若箭頭函式有多行則需要{},而有{}時就必須要有return這個關鍵字。
    • 若箭頭函式只有一個參數,參數可不需要()。
    • 若無參數或多參數,則()為必要。

延伸閱讀

  1. keydown和keypress有什麼不同?
    • keydown:按下鍵盤的瞬間,鍵盤上任何按鍵都有其對應的代碼,而代碼不區分大小寫。
    • keypress:按下鍵盤的瞬間,只有輸出文字符號的按鍵有效(ESC、方向鍵、倒退鍵等無效),且代碼有區分大小寫。
  2. ES5 const & let:
    ES5的兩種變數型態,const就是常數,指定後無法被變更。而let和const都可以是Block Scope的變數。例如:
    var x = 10;
    // Here x is 10
    { 
        const x = 2;
        // Here x is 2
    }
    // Here x is 10
    

參考來源

上面許多範例只有點到皮毛,想要看更多,請至下列參考來源


上一篇
JS30 自我學習筆記 - 序
下一篇
第二堂 - JS and CSS Clock
系列文
JS30自我學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言